<template>
  <div class="contacter">
    <template v-for="(cItem, cIndex) in contactorDtoList" :key="cIndex">
      <n-grid v-if="cItem.status !== 'DELETED'" :x-gap="10">
        <n-gi :span="7">
          <n-form-item
            v-if="customerFlag === 'CUSTOMER_FLAG_CHOOSE'"
            :path="`${pathKey}[${cIndex}].id`"
            :rule="{ required: true, message: '请选择对接人' }"
          >
            <AsyncSelect
              v-model:value="cItem.id"
              :options="methods.getContactorOptions"
              remote
              :init-remote="true"
              label-key="contactorName"
              value-key="id"
              placeholder="请选择对接人"
              :disabled="disabled"
              @update:value="(_, val) => methods.getContactorInfo(cIndex, val)"
            />
          </n-form-item>
          <n-form-item
            v-if="customerFlag === 'CUSTOMER_FLAG_ADD'"
            :path="`${pathKey}[${cIndex}].contactorName`"
            :rule="{ required: true, message: '请输入对接人姓名' }"
          >
            <n-input
              v-model:value="cItem.contactorName"
              placeholder="请输入姓名"
              maxlength="20"
              show-count
              clearable
              :disabled="disabled"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="6">
          <n-form-item
            :path="`${pathKey}[${cIndex}].contactorPhone`"
            :rule="{ validator: methods.validatorPhone }"
          >
            <n-input
              v-model:value="cItem.contactorPhone"
              placeholder="请输入手机号"
              maxlength="11"
              clearable
              :allow-input="(value) => !value || /^\d+$/.test(value)"
              :disabled="customerFlag === 'CUSTOMER_FLAG_CHOOSE' || disabled"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="10">
          <n-form-item :path="`${pathKey}[${cIndex}].remark`">
            <n-input
              v-model:value="cItem.remark"
              placeholder="请输入备注"
              maxlength="30"
              clearable
              show-count
              :disabled="customerFlag === 'CUSTOMER_FLAG_CHOOSE' || disabled"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="1">
          <img
            v-if="!disabled"
            src="@/assets/icons/close2.png"
            class="closeReceiver"
            @click="methods.removeReceiver(cIndex, cItem)"
          />
        </n-gi>
      </n-grid>
    </template>

    <n-button ghost type="primary" size="small" :disabled="disabled" @click="methods.addReceiver">
      <i class="i-material-symbols:add mr-4 text-18" />
      添加
    </n-button>
  </div>
</template>
<script setup lang="jsx">
import * as customerApi from '@/api/customer'
defineOptions({ name: 'Contacter' })
const contactorDtoList = defineModel({ type: Array, default: () => [] })
const props = defineProps({
  pathKey: {
    type: String,
    default: 'contactorDtoList',
  },
  customerFlag: {
    type: String,
    default: 'CUSTOMER_FLAG_ADD',
  },
  customerId: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})
const methods = reactive({
  validatorPhone(_, value, callback) {
    if (value && !/^1[3-9][0-9]{9}$/.test(value)) {
      callback(new Error('手机号格式错误！'))
    } else {
      callback()
    }
  },
  getContactorOptions(searchVal, id) {
    return customerApi
      .contactorList({ searchVal, customerId: props.customerId, id })
      .then((res) => res.data)
  },
  receiverMold() {
    return {
      id: null,
      contactorName: null,
      contactorPhone: null,
      remark: null,
      mid: Date.now(),
    }
  },
  addReceiver() {
    contactorDtoList.value.push(methods.receiverMold())
  },
  removeReceiver(cIndex, { mid }) {
    if (mid) {
      contactorDtoList.value.splice(cIndex, 1)
    } else {
      contactorDtoList.value[cIndex].status = 'DELETED'
    }
  },
  getContactorInfo(cIndex, val) {
    const { contactorPhone, remark } = val || {}
    contactorDtoList.value[cIndex].contactorPhone = contactorPhone
    contactorDtoList.value[cIndex].remark = remark
  },
})
</script>
<style lang="scss" scoped>
.closeReceiver {
  margin-top: 10px;
  cursor: pointer;
}
</style>
